<script setup lang="ts">
  import { onMounted, ref } from "vue";
  import { useProductStore } from "@/stores";
  import * as _ from "@usemath/utils";

  const productStore = useProductStore();
  const modalVisible = ref(false);
  const tree = ref<any>([]);
  const categories = ref<any>([]);
  const detail = ref<any>({});
  const expandedKeys = ref([]);

  onMounted(() => {
    fetchList();
  });

  async function fetchList() {
    tree.value = _.toTree(await productStore.getCategoryList());
  }

  function handleAdd() {
    detail.value = {};
    modalVisible.value = true;
  }

  async function handleEdit(record: any) {
    detail.value = await productStore.getCategory({ id: record.id });
    modalVisible.value = true;
  }

  async function handleSave() {
    await productStore.saveCategory({ ...detail.value });
    await fetchList();
    modalVisible.value = false;
  }

  async function handleRemove(record: any) {
    await productStore.deleteCategory({ id: record.id });
    categories.value = categories.value.filter((item: any) => item.id !== record.id);
  }

  async function handleAddChild(id: number) {
    detail.value = {
      parentId: id,
    };
    modalVisible.value = true;
  }

  async function handleChange(data: any, extra: any) {
    tree.value = data;
    const parentId = extra.dragTarget.parentId;
    const list = _.findAll(_.flattenTree(JSON.parse(JSON.stringify(data))), { parentId });
    for (let i = 0; i < list.length; i++) {
      list[i].sort = list.length - i;
    }
    await productStore.updateCategories(list);
  }
</script>

<template>
  <div class="page-container">
    <Breadcrumb :items="['商品管理', '商品分类']"></Breadcrumb>
    <a-card :bordered="false">
      <a-button type="primary" size="small" style="margin-bottom: 16px" @click="handleAdd">新增</a-button>
      <a-table row-key="id" v-model:expandedKeys="expandedKeys" @change="handleChange" :data="tree" show-empty-tree :draggable="{ type: 'handle', width: 40 }">
        <template #columns>
          <a-table-column title="商品分类" data-index="name"></a-table-column>
          <a-table-column title="操作" :width="160">
            <template #cell="{ record }">
              <a-space>
                <a-button type="primary" size="small" @click="handleAddChild(record.id)">新增子项</a-button>
                <a-button type="primary" size="small" @click="handleEdit(record)">编辑</a-button>
                <a-popconfirm content="您确认移除此记录么？" position="tr" @ok="handleRemove(record)">
                  <a-button type="primary" size="small" status="danger">移除</a-button>
                </a-popconfirm>
              </a-space>
            </template>
          </a-table-column>
        </template>
      </a-table>
    </a-card>
  </div>
  <a-modal :visible="modalVisible" title="商品分类" @cancel="modalVisible = false" @ok="handleSave">
    <a-form :model="{}" auto-label-width>
      <a-form-item label="分类名称" style="margin-bottom: 0">
        <a-input placeholder="请输入分类名称" v-model="detail.name"></a-input>
      </a-form-item>
    </a-form>
  </a-modal>
</template>
